<template>
	<div class="table-container">
		<div class="table-container-header">
			<div class="header-left">
				<slot name="toolLeft" v-if="!title"></slot>
				<div v-else>{{title}}</div>
			</div>
			<div class="header-right">
				<slot name="toolRight"></slot>
				<n-icon size="20">
					<SettingsOutline/>
				</n-icon>
				<n-divider vertical />
				<n-icon size="20">
					<ReloadOutline/>
				</n-icon>
				<n-divider vertical />
				<n-icon size="20">
					<ScanOutline/>
				</n-icon>
			</div>
		</div>
		<div class="table-container-content">
			<n-data-table v-if="tableData.length > 0 || newTabledata.length > 0" :data="tableData.length > 0?tableData:newTabledata" v-bind="$attrs" :pagination="false" />
			<n-data-table v-else v-bind="$attrs" :pagination="false" />
			
		</div>
		<div class="table-container-footer">
			<n-pagination v-if="pagination.show" v-model:page="pagination.pageNum" v-model:page-size="pagination.pageSize" :page-count="pagination.total" show-size-picker
				:page-sizes="pagination.pageSizes" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import {
		useAttrs
	} from 'vue'
	import { SettingsOutline,ReloadOutline,ScanOutline } from '@vicons/ionicons5'
	/**
	 * 
	 */
	// 分页
	interface Props{
		tableData?: Array<object>,
		pagination:{
			pageSize?: Number,
			pageNum?: Number,
			pageSizes?:Array<Number>,
			total?:Number,
			show?:Boolean
		},
		title:String
	}
	const attr = useAttrs()
	const props = withDefaults( defineProps<Props>(),{
		tableData(){
			return []
		},
		pagination(){
			return {
				pageNum: 1,
				pageSize: 10,
				pageSizes: [10,20,30,40,50],
				total: 0,
				show:true
			}
		}
	})
	let newTabledata = ref<Array<object>>([])
	// watch(props.tableData, (oldValue,newvalue) => {
	// 	console.log(oldValue,newvalue)
	// 	data.value = newvalue
	// }, { deep: true,immediate:true })
	
	const emits = defineEmits([
		'fetch-success',
		'fetch-error',
	])
	const {
		loadUrl
	}: { loadUrl?: Function} = attr
	
	onMounted(() => {
		initData()
	})

	function initData(params = {}) {
		if (loadUrl) {
			loadUrl(params).then(res => {
				if (res.code == 200) {
					newTabledata.value = res.data
					emits('fetch-success', res)
				}
			}).catch((e:any) => {
				emits('fetch-error', e)
			})
		}
	}
	
	defineExpose({
		initData
	})
</script>

<style scoped lang="scss">
	.table-container{
		&-header{
			padding: 5px 0;
			height: 30px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.header-right{
				display: flex;
				align-items: center;
			}
		}
		&-content{
			
		}
		&-footer{
			display: flex;
			flex-direction: row-reverse;
			padding: 8px 0;
			height: 50px;
		}
	}
</style>